<div class="alert alert-warning mb-0" role="alert" ng-if="$ctrl.data && !$ctrl.data.length">
    <i class="fas fa-exclamation-triangle"></i> There is no data has been created for this attribute yet!
</div>
<div class="" ng-if="!($ctrl.data && !$ctrl.data.length)">
    <div class="card-header py-1">
        <span ng-bind="$ctrl.header"></span>
        <div class="row" ng-if="$ctrl.data[0]">
            <div class="col-md-1"></div>
            <small ng-repeat="col in $ctrl.data[0].data.fields | orderBy:'priority' track by $index" ng-if="$index < 3"
                ng-bind="col.title" class="col-md-3"></small>
            <div class="col text-right"></div>
        </div>
    </div>
    <div class="card-body" ng-if="!$ctrl.data">
        <!-- <div class="alert alert-warning" role="alert">
            <i class="fas fa-exclamation-triangle"></i> Loading data! Please hold on...
        </div> -->
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="card-body py-0" ng-if="$ctrl.data">
        <div dnd-list="$ctrl.data" dnd-inserted="$ctrl.updateOrders(index)">
            <div ng-repeat="item in $ctrl.data track by $index" dnd-draggable="item"
                dnd-type="'item'" 
                dnd-effect-allowed="copyMove" 
                dnd-selected="$ctrl.selectedItem = item"
                dnd-dragstart="$ctrl.dragStart($index)" 
                ng-class="{'selected': $ctrl.selectedItem === item}"
                class="row border-top">
                <div class="col-md-1 form-inline">
                    <div class="">
                        <small class="fa fa-grip-vertical mr-2 text-black-50"></small>
                        <!-- <input class="ml-1 form-control form-control-sm" ng-model="item.priority" style="width:30px" /> -->
                    </div>
                </div>
                <div ng-if="$index < 3" ng-repeat="val in item.data.values | orderBy: 'priority' track by $index"
                    class="col-md-3 py-2">
                    <attribute-value-preview data="val"></attribute-value-preview>
                </div>
                <div class="col text-right">
                    <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                        <a ng-click="$ctrl.update(item)" class="btn btn-link text-primary">
                            <span class="fas fa-pen"></span>
                        </a>
                        <a ng-click="$ctrl.delete(item)" class="btn btn-link text-danger">
                            <span class="fas fa-trash-alt"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>